<template>
  <div style="padding: 10px 36px;">
    <el-transfer
      v-model="internalValue"
      :data="data"
      :titles="['待添加人员', '已添加组人员']"
      filterable
      class="trans"
    />
  </div>
</template>


<script>
export default {
  props: {
   selectedUsers: {
    type: Array,
    default: () => []
  }
  },
  emits: ['update:selectedUsers'],
  data() {
    return {
      data: [],            // 所有人数据
      internalValue: []    // 当前 transfer 右侧选中 ID
    };
  },
  watch: {
  selectedUsers: {
    immediate: true,
    handler(val) {
      if (!Array.isArray(val)) {
        val = [];
      }
      // 只有当 internalValue 和 val 不同时才更新，避免无限循环
      if (JSON.stringify(this.internalValue) !== JSON.stringify(val)) {
        this.internalValue = [...val];
      }
    }
  },
  internalValue(val) {
    this.$emit('update:selectedUsers', val);
  }
}
,
  mounted() {
    this.fetchAllUsers();
  },
  methods: {
    async fetchAllUsers() {
      try {
        const res = await this.$api.getAllUsers();
        this.data = res.map(user => ({
          key: user.id,
          label: user.name,
        }));
      } catch (e) {
        this.$message.error("获取用户失败");
      }
    }
  }
}

</script>

<style>
.trans .el-transfer__buttons {
	text-align: center;
}

.trans .el-transfer__button {
	display: block !important;
	margin: 8px 0 !important;
}

.trans .el-transfer-panel__body, .trans .el-transfer-panel__list {
	height: 600px !important;
}

</style>